<template>
    <div class="treeWrapper">
        <div class="tree-bar">
            <el-tree
            :data="treeData"
            :props="defaultProps"
            :highlight-current="true"
            :default-expanded-keys="[this.label]"
            node-key="label"
            ref="treeBox"
            class="elTree"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
            v-loading="loading"
            ></el-tree>
        </div>
    </div>
</template>
<script>
import { getTdxzbmTree } from '@/api/dmgl/tdxz.js';
export default {
    data() {
        return {
            loading: false,
            treeData: [], // 分类树data
            filterText: '',
            defaultProps: {
                label: "label",
                children: "children"
            },
            label: ''
        }
    },
    watch: {
        filterText(val) {
            this.$refs.treeBox.filter(val);
        }
    },
    mounted() {
        this.getTdxzbmTree() 
    },
    methods: {
        /**点击树节点 */
        handleNodeClick(data, node) {
            console.log(data)
            const that = this
            let tableObj = {
                flLike: data.data.fl
            }
            that.$emit("handleClickTreeNode", tableObj)
        },

        /** 树的一次性加载 */
        getTdxzbmTree() {
            const that = this
            that.loading = true
            getTdxzbmTree().then(res => {
                if(res.code == 0) {
                    let result = [{
                        id: "0",
                        label: "停电性质编码",
                        icon: null,
                        children: res.data,
                        data: {
                            bzm: null,
                            fl: "",
                            id: "",
                            pfl: null,
                            tdxz: "",
                            tdxzm: "",
                            tdzt: "",
                        }
                    }]
                    that.label = result[0].label
                    that.treeData = result                
                    that.loading = false
                } else {
                    that.$message.error(res.message)
                }
            })
        },

        /** 搜索字典 */
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        }
    }
}
</script>
<style lang='scss' scoped>
.treeTitle {
    margin: 10px 0 0;
}
.search {
    margin: 5px 0;
}
.tree-bar {
    margin-top: 7px;
}
label {
  font-weight: 400 !important;
}

.treeWrapper {
    height: 100%;
}
.treeWrapper .tree-bar {
    width: 100%;
    height: calc(100% - 7px);
    overflow: auto;
}
.elTree{
  width: 100%;
  height: 100%;
  overflow: auto;
}
/deep/ .el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
</style>
